<template>
<div class="components_edit_modal">
            <el-dialog title="导入学生信息"  :visible.sync="state" :show-close="true" :close-on-click-modal="false">
              <el-form :model="studentInfo" :rules="rules" ref="studentInfo">
                  <el-form-item label="院校" prop="schoolId">
                    <el-select v-model="studentInfo.schoolId" placeholder="院校" @change="changeSchool">
                      <el-option v-for="school in schoolList" :label="school.text" :value="school.id" :key="school.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="二级院校" prop="secondSchoolId">
                    <el-select v-model="studentInfo.secondSchoolId" placeholder="二级院校" @change="changeSecondSchool">
                        <el-option v-for="secondSchool in secondSchoolList" :label="secondSchool.text" :value="secondSchool.id" :key="secondSchool.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="专业" prop="professionId">
                    <el-select v-model="studentInfo.professionId" placeholder="专业" @change="changeProfession">
                      <el-option v-for="profession in professionList" :label="profession.text" :value="profession.id" :key="profession.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="班级" prop="classId">
                    <el-select v-model="studentInfo.classId" placeholder="班级" >
                          <el-option v-for="classItem in classList" :label="classItem.text" :value="classItem.id" :key="classItem.id"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="导入文件" class="lineblock" prop="uploadFile">
                    <el-upload
                          ref="schemeUpload"
                          class="components_upload"
                          :action="upload.url"
                          :auto-upload="false"
                          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                          :limit="1"
                          :on-change="handleUploadChange"
                          :on-remove="handleRemove"
                          >
                          <el-button size="mini" type="primary">选择文件</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传模版文件</div>
                      </el-upload>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="importBtn('studentInfo')" size="small">导入</el-button>
                <el-button @click="state = false" size="small">取 消</el-button>
              </div>
            </el-dialog>
            </div>
</template>
<script>
  import ElCol from "element-ui/packages/col/src/col";
  import moment from 'moment'
  export default {
    components: {ElCol},
    data() {
      return {
        state:false,
        studentInfo:{
          schoolId:null,
          secondSchoolId:null,
          professionId: null,
          classId:null,
          uploadFile:null
        },
        rules: {
          schoolId: [
            { required: true, message: '请选择院校', trigger: 'change',type: 'number'}
          ],
          secondSchoolId: [
            { required: true, message: '请选择二级院校', trigger: 'change',type: 'number'}
          ],
          professionId: [
            { required: true, message: '请选择专业', trigger: 'change',type: 'number'}
          ],
          classId: [
            { required: true, message: '请选择班级', trigger: 'change',type: 'number'}
          ],
          uploadFile: [
            { required: true, message: '请上传学生信息文件', trigger: 'blur', type: 'object'},
          ]
        },
        schoolList:[],
        secondSchoolList:[],
        professionList:[],
        classList:[],
        upload: {
            url:api.importStudentInfoSession,
            fileList:[],
        },
      };
    },
    created(){
    },
    methods: {
            showDialog(id){
              let self = this;
              if(this.$refs['studentInfo']!==undefined){
                  this.$refs['studentInfo'].resetFields();
               }
              self.state = true;
              // 重置上传文件
              if(this.$refs.schemeUpload !== undefined){
                this.$refs.schemeUpload.uploadFiles = [];
              }
              this.secondSchoolList = [];
              this.professionList = [];
              this.classList = [];
              self.getSchoolList();
            },
            importBtn(studentInfo){
              let self = this;
              this.$refs['studentInfo'].validate((valid) => {
                    if (valid) {
                        let formData = new FormData();
                        formData.append("file",this.studentInfo.uploadFile);
                        formData.append("classId",this.studentInfo.classId);
                        let config = {
                          headers: {
                            'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
                          }
                        };
                        this.axios.post(api.importStudentInfoSession,formData,config).then(function (response) {
                            // console.log(response);
                            if(response.data.success){
                              self.$message.success(response.data.msg);
                              self.state = false;
                            }else{
                              self.$message.error(response.data.msg);
                            }
                          self.$parent.$refs.studentSupportTable.$emit('vuetable:refresh')
                        });
                    } else {
                        return false;
                    }
                });
            },
            handleUploadChange(file, fileList){
                // 校验文件名 过滤文件
                if(file.name.indexOf(".xlsx") == -1){
                    this.$message.error("只能上传培养方案模版Excel文件");
                    fileList.splice(0,fileList.length);
                    return;
                }
                // 设置数据
                this.studentInfo.uploadFile = file.raw;
                fileList.splice(0,fileList.length);
                fileList.push(file);
                this.$refs['studentInfo'].validateField("uploadFile");
            },
            //获取学校
            getSchoolList(){
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //学校监听
            changeSchool(schoolId){
                this.studentInfo.secondSchoolId = null;
                this.studentInfo.professionId=null;
                this.studentInfo.classId=null;
                this.secondSchoolList = [];
                this.professionList = [];
                this.classList = [];
                this.getSecondSchoolList(schoolId);
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        vm.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //二级学校监听
            changeSecondSchool(secondSchoolId){
                let schoolId = this.studentInfo.schoolId;
                this.studentInfo.professionId=null;
                this.studentInfo.classId=null;
                this.professionList = [];
                this.classList = [];
                this.getProfessionlList(schoolId,secondSchoolId);
            },
            //获取筛选后的专业
            getProfessionlList(schoolId,secondSchoolId){
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeProfession(professionId){
                let schoolId = this.studentInfo.schoolId;
                let secondSchoolId = this.studentInfo.secondSchool;
                this.studentInfo.classId=null;
                this.classList = [];
                this.getClassList(schoolId,secondSchoolId,professionId);
            },
            //获取筛选后的班级
            getClassList(schoolId,secondSchoolId,professionId){
                let vm = this;
                vm.axios.get(api.getClassList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId,
                        professionId:professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 移除文件
            handleRemove(file, fileList) {
                this.studentInfo.uploadFile = null;
            },
    }
  }
</script>

<style scoped>
.components_upload .el-upload__tip{
  margin-top: 0;
}
</style>